<template>
    <el-dialog :visible.sync="show" :title="villageName + ' 七天内新增用户'" center :before-close="hide">
        <div class="content">
            <div class="echarts" id="echarts">

            </div>
            <div class="amount">
                历史新增总数：{{ sumUserNum }}
            </div>
        </div>
    </el-dialog>
</template>

<script>
import * as echarts from "echarts"
export default {
    props: {
        show: {
            type: Boolean
        },
        list: {
            type: Array,
        },
        sumUserNum: {
          type: String,
        },
        villageName: {
            type: String,
        },
    },
    data() {
        return {
            xData: [],
            yData: []
        }

    },
    model: {
        event: "showDialog",
        prop: "show"
    },
    /*computed: {
        amount() {
            return this.yData.reduce((a, b) => a + Number(b), 0)
        }
    },*/
    watch: {
        show() {
            this.xData = this.list.map(item => item.date)
            this.yData = this.list.map(item => item.count)
            if (!this.echarts) {
                this.$nextTick(() => {
                    this.echarts = echarts.init(document.getElementById("echarts"))
                    this.renderData()
                })

            } else {
                this.renderData()
            }

        }
    },
    mounted() {
    },
    methods: {
        renderData() {
            const { xData, yData } = this
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    boundaryGap: false,
                    name: "日期",
                    type: 'category',
                    data: xData
                },
                yAxis: {

                    type: 'value',
                    minInterval: 1,
                    name: "新增用户数量（7日内总数："+yData.reduce((a,b)=>a+Number(b),0)+"）"
                },
                series: [
                    {
                        data: yData,

                        type: 'line',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true //在每个上面显示当前值
                                }
                            }
                        }
                    }
                ]
            };
            this.echarts.setOption(option)
        },
        hide() {
            this.$emit("showDialog", false)
        }
    },
}
</script>

<style lang="scss" scoped>
.content {
    position: relative;
    .echarts {
        height: 500px
    }

    .amount {
        right: 79px;
        top: 26px;
        font-weight: 900;
        font-size: 17px;
        color: red;
        position: absolute;
    }
}
</style>
